<template>
  <div class="health-input-container">

    <div class="header health-item">
      <div class="health-name">{{healthDetail.name}}</div>
      <div class="health-detail">包含{{healthDetail.itemNumber}}项检查</div>
    </div>

    <div class="body">
      <div class="input-item">
        <div class="item-container">
          <div class="input-title">体检时间</div>
          <div class="datePickControl" @click="showDatePick">{{date ? date :'请选择体检时间'}}<img width="20" height="20" src="./calendar.png"></div>
        </div>
      </div>
      <div class="input-item">
        <div class="item-container">
          <div class="input-title">姓名</div>
          <input type="text" class="input" v-model="name" placeholder="请填写体检人本人姓名"/>
        </div>
      </div>
      <div class="input-item">
        <div class="item-container">
          <div class="input-title">身份证号</div>
          <input type="text" class="input" maxlength="18" v-model="idNumber" placeholder="请填写体检人身份证号"/>
        </div>
      </div>
      <div class="input-item">
        <div class="item-container last">
          <div class="input-title">手机号码</div>
          <input class="input" type="number" oninput="if(value.length>11)value=value.slice(0,11)" v-model="telephone" placeholder="请填写体检人手机号码"/>
        </div>
      </div>
    </div>

    <div class="health-detail-footer">
      <span class="health-price">¥{{healthDetail.price}}</span>
      <span class="health-buynow" @click="toPay">立即付款</span>
    </div>
    <DateTimePicker
      type="date"
      v-model="isShowDatePick"
      @syncResult="syncDateTimePicker"
      :startYear="startTime.year"
      :startMonth="startTime.month"
      :startDay="startTime.day"
      :endYear="endTime.year"
      :endMonth="endTime.month"
      :endDay="endTime.day"/>
  </div>
</template>

<script>
import DateTimePicker from 'base/DateTimePicker/DateTimePicker'
import { getHealthDetail, http, payUrl } from 'api/main.js'
import { isChineseName, isIdNumber, isTelephone } from 'common/js/reg.js'

export default {
  data () {
    return {
      healthId: Number,
      healthDetail: {},
      name: '',
      idNumber: '',
      telephone: '',
      date: '',
      isShowDatePick: false,
      startTime: {},
      endTime: {}
    }
  },
  created() {
    this.healthId = this.$route.params.id
    this._getHealthDetail(this.healthId)
    this._getUserArchive()
    this._timeControl ()
  },
  watch: {
    isShowDatePick(t) {
      if(t === false) {
        this._checkDate(this.date)
      }
    }
  },
  methods : {
    toPay() {
      this._buy()
    },
    showDatePick() {
      this.isShowDatePick = true
    },
    syncDateTimePicker(res) {
      console.log(res)
      let month = res.month
      this.date = res.year + '-' + res.month + '-' + res.day
    },
    _checkDate(date) {
      if (date) {
        http('order', {
          iReserve: 1,
          date: date
        }).then((res) => {
          switch(res) {
            case '0':
              alert('您选择的日期不提供体检服务')
              this.isShowDatePick = true
              break
            case '1':
              alert('您选择的日期预约人数已满')
              this.isShowDatePick = true
              break
            case '2':
            defaut:
              break
          }
        })
      }
    },
    _timeControl () {
      const today = new Date()
      const tomorrow = new Date(Number(+today) + (24 * 60 * 60 * 1000))
      const diff = 30 * 24 * 60 * 60 * 1000
      const endDay = new Date(Number(+tomorrow) + diff)
      this.startTime.year = tomorrow.getFullYear()
      this.startTime.month = tomorrow.getMonth() + 1
      this.startTime.day = tomorrow.getDate()
      this.endTime.year = endDay.getFullYear()
      this.endTime.month = endDay.getMonth() + 1
      this.endTime.day = endDay.getDate()
    },
    _getUserArchive() {
      http('archive').then((res) => {
        this.telephone = res.telephone
        this.name = res.personname
        this.idNumber = res.identity
      })
    },
    _getHealthDetail() {
      getHealthDetail(this.healthId).then((res) => {
        this.healthDetail = res
      })
    },
    _buy() {
      if (!this.date) {
        alert('请选择预约时间')
        return
      }
      if (!isChineseName(this.name)) {
        alert('请输入正确的姓名')
        return
      }
      if (!isIdNumber(this.idNumber)) {
        alert('请输入正确的身份证号码')
        return
      }
      if (!isTelephone(this.telephone)) {
        alert('请输入正确的手机号码')
        return
      }
      http('order', {
        iBuy: 1,
        personName: this.name,
        packageId: this.healthId,
        packageName: this.healthDetail.name,
        userTelephone: this.telephone,
        identity: this.idNumber,
        money: this.healthDetail.price,
        reserveTime: this.date
      }, 'post').then((res) => {
        this._pay(res.orderId)
      }).catch((res) => {
        console.log(res)
      })
    },
    _pay(id) {
      console.log(payUrl(id))
      window.location.href=payUrl(id)
    }
  },
  components: {
    DateTimePicker
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped scoped lang="stylus" rel="stylesheet/stylus">
  @import "healthInput.styl"
</style>
